<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引包 -->
    <script src="../js/vue.js"></script>
    <!-- 时间转换插件：对外暴露dayjs函数，可以处理时间戳 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.4.1/dayjs.min.js"></script>
</head>

<body>
    <!-- 容器|模板 -->
    <div id="app">
        <!-- 在time响应式数据旁边加上|,称之为管道 -->
        <h1>{{time|timeFilter}}</h1>
    </div>
     <hr>
    <!-- 容器 -->
    <div id="app1">
       <h3>我是app1{{shijian|timeFilter}}</h3>
    </div>
</body>

</html>
<script>
    //过滤器:可以利用已有的数据，造出一个新的数据
    //过滤器使用步骤:全局过滤器、局部过滤器
    //第一步:定义,利用Vue对象的filter方法进行定义
    //第二步:过滤器的参数
    //第一个参数是过滤器的名字【复合命名标识符规范】
    //第二个参数：回调函数,当你在使用这个过滤器的时候才会执行
    //第三步:使用
    //需要注意：当你使用过滤器的时候，回调函数会执行一次，人家会把数据注入进来。作为参数
    // Vue.filter("timeFilter", (time) => {
    //     //过滤器回调返回的结果，即为显示的东西
    //     //过滤器：利用已有的数据可以造出一个新的数据
    //     return dayjs(time).format("YYYY-MM-DD");
    // });

    //创建VM 
    new Vue({
        el:'#app',
        data: {
            //存储时间戳 
            time: Date.now()
        },
        //配置对象这里定义的---局部过滤器
        filters:{
          //局部过滤器
          //局部过滤器：配置对象K带有s
          //局部过滤器，函数的名字，即为过滤器的名字
          timeFilter(time){
             return dayjs(time).format('YYYY-MM-DD');
          }   
        }
    });
    //在真实项目当中，一般利用时间戳一般需要转换为正常的时间【2021年11月27日09:09:44】
    //时间转换的插件：moment.js、dayjs

    //创建VM1
    new Vue({
        el: '#app1',
        data: {
            shijian: Date.now()
        }
    })
</script>